<template>
    <!-- <el-cascader v-model="value" :options="options" /> -->
    <el-cascader-panel :options="options"    :props="cascaderProps"  @change="change"/>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElButton, ElCascader, ElCheckbox, ElCascaderPanel} from 'element-plus'
const props = defineProps({
  closeFN: {
    type: Function
  }
})
const cascaderProps = {
  expandTrigger: 'hover'
}
onMounted(() => {
 
})
const change = (CascaderValue) => {
  props.closeFN()
  console.log(CascaderValue,'CascaderValue')
  console.log(props,'props')
}
const value = ref()
const checked1 = ref()
const options = [
  {
    value: '船舶信息',
    label: '船舶信息',
  },
  {
    value: '人员信息',
    label: '人员信息',
  },
  {
    value: '历史轨迹显示',
    label: '历史轨迹显示',
    children: [
      {
        value: '10分钟',
        label: '10分钟',
      },
      {
        value: '1小时',
        label: '1小时',
      },
      {
        value: '6小时',
        label: '6小时',
      },
    ],
  },
]
</script>

<style lang="scss" scoped></style>